<!--  -->
<template>
    <div>
        <Card>
            <div slot="title" >
                <Button v-if="btnp.pzlxing_xzlx" @click="handleClickAdd" class="zh-hollow" type="primary" icon="plus-round">新增类型</Button>
            </div>
             <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                    <Col span="10">
                        <FormItem label="供应商">
                            <Select v-model="formItem.supplier_uuid" filterable>
                                <Option  v-for="item in moreSupplierList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="10">
                        <FormItem label="类型名称">
                            <Input v-model="formItem.name" clearable></Input>
                        </FormItem>
                    </Col>
                    
                </Row>
                <Row  >
                    <Col span="8" offset="16"  style="text-align:right;">
                        <Button @click='handleClickgetTable' class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                    </Col>
                </Row>
             </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page  :total="total" show-total show-sizer :current.sync="formItem.pageNumber" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal :title="typetitle" :loading="saveloading" v-model="modal_type" @on-ok='save' ok-text="保存" cancel-text="放弃操作">
            <Form :label-width="80" :model="typeForm" style="padding:15px 30px;">
                <FormItem label="供应商">
                    <Select v-model="typeForm.supplier_uuid" filterable  v-if="typetitle==='新增类型'">
                        <Option  v-for="item in supplierList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                    </Select>
                    <Input v-else v-model="typeForm.supplier" readonly ></Input>
                </FormItem>
                <FormItem label="类型名称">
                    <Input v-model="typeForm.name" :maxlength="4" ></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import util from '@/libs/util.js'
import {
    getVoucherProvideList,
    getPurVoucType,
    deletePurVoucType,
    saveAddPurVoucType
} from '@/libs/purchase.js'
export default {
    name:'',
    data () {
        return {
            saveloading:true,
            btnp:{},
            btn:{
                pzlxing_xzlx:false,
                pzlxing_bj:false,
                pzlxing_sc:false,
            },
            typeForm:{
                uuid:'',
                supplier_uuid:'',
                supplier:'',
                name:''
            },
            total:3,
            loading:true,
            formItem:{
                supplier_uuid:'',
                name:'',
                pageNumber:1,
                pageSize:10
            },
            typetitle:'',
            modal_type:false,
            moreSupplierList:[],
            supplierList:[],
            columns:[
                {
                    key:'supplier_name',
                    title:'供应商'
                },
                {
                    key:'name',
                    title:'类型名称'
                },
                {
                    key:'action',
                    title:'操作',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.pzlxing_bj?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    this.typetitle="编辑类型信息",
                                    this.modal_type=true;
                                    this.gotoEdit(params.row)
                                    
                                }
                                }
                            },'编辑'), 
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#EA0000',
                                display:this.btnp.pzlxing_sc?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    let config={
                                    title:'删除类型',
                                    content:'删除类型后不可恢复。',
                                    okText:'删除',
                                    cancelText:'放弃操作',
                                    onOk:()=>{
                                        this.delete(params.row.uuid)
                                    }
                                    }
                                    this.$Modal.confirm(config)
                                }
                                }
                            },'删除')
                        ])
                    }
                }
            ],
            data:[]
        };
    },
    methods:{
        async save(){
            if(this.typeForm.supplier_uuid.length<=0){
                this.$Notice.error({
                    desc:'请选择供应商'
                })
            }else if(this.typeForm.name==''){
                this.$Notice.error({
                    desc:'请输入类型名称'
                })
            }else if(this.typeForm.name.length<2){
                this.$Notice.error({
                    desc:'类型名称为2-4个字符'
                })
            }
            else{
                let form=JSON.parse(JSON.stringify(this.typeForm));
                let res=await saveAddPurVoucType(form);
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                    desc:"已保存"
                });
                this.modal_type=false;
                this.handleClickgetTable();
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
            let that=this;
            this.saveloading=false;
            setTimeout(()=>{
                that.saveloading=true;
            },500)
        },
        gotoEdit(obj){
            this.typeForm={
                uuid:obj.uuid,
                supplier_uuid:obj.supplier_uuid,
                supplier:obj.supplier_name,
                name:obj.name
            }
        },
        async delete(uuid){
            let res=await deletePurVoucType(uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:"已删除"
                });
                this.handleClickgetTable();
                this.getTable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        pageSizeChange(size){
            //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },
        handleClickgetTable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            for(let key in form){
                if(form[key]==='全部'){
                form[key]='';
                }
            }
            let res=await getPurVoucType(form);
            if(res.status===200){
                let response=res.data;
                if(response.code===200){
                    this.total=response.data.total;
                    this.data=response.data.rows.map(item=>{
                        item.time=item.created.slice(0,16);
                        return item
                    })
                    this.loading=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    });
                }
            }else{
                this.$Notice.error({
                    title: '请求失败'
                });
            } 
        },
        async getProvide(){
            let res=await getVoucherProvideList('supply');
            let response=res.data;
            if(response.code==200){
                this.moreSupplierList=[{name:'全部',uuid:'全部'},...response.data];
                this.supplierList=response.data;
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        handleClickAdd(){
            this.typetitle="新增类型",
            this.modal_type=true;
        }
    },
    watch:{
        modal_type:function(){
            if(!this.modal_type){
                this.typeForm={
                    uuid:'',
                    supplier_uuid:'',
                    supplier:'',
                    name:''
                }
            }
        }
    },
    created(){
        this.btnp=util.bpower(this,this.btn);
        this.getTable();
        this.getProvide();
    },

}

</script>
<style lang='scss' >
</style>